<template>
    <view>
        <view class="tabs align-center" :style="{background:styletype == 2?'#fff':'none'}">
             <view class="tab sel">全部</view>
             <view class="tab">销量最高</view>
             <view class="tab">
                 筛选
                 <image src="@/static/icon/shai.png" mode="widthFix"></image>
            </view>
         </view>
   
        <view class="slists" :style="{marginTop:styletype == 2?'30rpx':'0'}">
            
            <!-- <view class="empty"> 暂无门店~ </view> -->
            <view class="shop-item"  v-for="i in 4">
                <view class="shopname justify-between">
                    <view class="logo"></view>
                    <view class="nameother ">
                        <view class="name_isnew align-center">
                            <view class="name">bolon眼镜(达芬奇店)</view>
                            <view class="is_new">新店开业</view>
                        </view>
                        <view class="tagslist align-center">
                            <text class="tag1">免预约</text>
                            <text class="tag1">随时退</text>
                        </view>
                        <view class="distance_rating align-center">
                            <view class="distance">
                                距离 <text>19</text> km
                            </view>
                            <view class="rating align-center">
                                <image src="@/static/icon/collect.png" mode="widthFix"></image>
                                4.8
                            </view>
                        </view>
                    </view>
                    <view class="btn">
                        进店
                    </view>
                </view>
                <view class="goodslist justify-between">
                    <view class="goods">
                        
                        <view class="thumb">
                            <image src="" mode="scaleToFill"></image>
                        </view>
                        <view class="other">
                            <view class="goods_name">我是谁</view>
                            <view class="tagslist">
                                <view class="tag1">傻逼</view>
                            </view>
                            <view class="price_buynum justify-between align-center">
                                <view class="price">
                                    <text>￥</text>
                                    <text>69</text>
                                    <text>/元</text>
                                </view>
                                <view class="buynum">已售 300+</view>
                            </view>
                        </view>
                    </view>
                    <view class="goods">
                        
                        <view class="thumb">
                            <image src="" mode="scaleToFill"></image>
                        </view>
                        <view class="other">
                            <view class="goods_name">我是谁</view>
                            <view class="tagslist">
                                <view class="tag1">傻逼</view>
                            </view>
                            <view class="price_buynum justify-between align-center">
                                <view class="price">
                                    <text>￥</text>
                                    <text>69</text>
                                    <text>/元</text>
                                </view>
                                <view class="buynum">已售 300+</view>
                            </view>
                        </view>
                    </view>
                    <view class="goods">
                        
                        <view class="thumb">
                            <image src="" mode="scaleToFill"></image>
                        </view>
                        <view class="other">
                            <view class="goods_name">我是谁</view>
                            <view class="tagslist">
                                <view class="tag1">傻逼</view>
                            </view>
                            <view class="price_buynum justify-between align-center">
                                <view class="price">
                                    <text>￥</text>
                                    <text>69</text>
                                    <text>/元</text>
                                </view>
                                <view class="buynum">已售 300+</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
           
        </view>
    </view>
</template>

<script>
    export default{
        name:"Shops",
        props:{
            is_put:{
                type:Boolean,
                default:false
            },
            styletype:{
              type:Number,
              default:1  
            }
        },
        data(){
            return{
                
            }
        }
    }
</script>

<style lang="scss">
    @import '../../common/common.scss';
    .tabs{
        height: 90rpx;
        
        .tab{
            width: 33.33%;
            text-align: center;
            font-size: 28rpx;
            font-weight: 500;
            image{
                width: 25rpx;
            }
        }
        .sel{
            position: relative;
            &::before{
                content: " ";
                position: absolute;
                width: 47rpx;
                height: 5rpx;
                background-color: #E1B9A2;
                bottom: -10rpx;
                left: 50%;
                margin-left: -23.5rpx;
            }
        }
    }
    .slists{
        width: 700rpx;
        margin: 0 auto;
        background: #FFFFFF;
        border-radius: 4rpx;
        padding: 19rpx 9rpx;
      
        .shop-item{
            margin-bottom: 30rpx;
            .shopname{
                width: 660rpx;
                margin: 0 auto;
                align-items: center;
                border-bottom: 1px solid  #EFF1F6;
                .logo{
                    height: 103.13rpx;
                    width: 103.13rpx;
                    border-radius: 10rpx;
                    background-color: #ccc;
                    margin-left: 11.5rpx;
                }
                .nameother{
                    width: 400rpx;
                    padding-bottom: 22rpx;
                    .name_isnew{
                        .name{
                            color: var(--str-max-color);
                            font-size: 26.81rpx;
                            font-weight: bold;
                        }
                        .is_new{
                            font-size: 20.61rpx;
                            color: #fff;
                            margin-left: 18rpx;
                            width: 101rpx;
                            height: 31rpx;
                            text-align: center;
                            line-height: 31rpx;
                            background: var(--common-color);
                            border-radius: 6rpx;
                        }
                    }
                    .tagslist{
                        margin-top: 5rpx;
                        .tag1{
                            display: inline;    
                            margin-right: 5rpx;
                            padding: 0 5rpx;
                            border: 1px solid #ccc;
                            color: var(--str-mid-color);
                            font-size: 20rpx;
                            line-height: 26rpx;
                            border-radius: 5rpx;
                        }
                    }
                    .distance_rating{
                        .distance{
                            font-size: 20rpx;
                            text{
                                margin: 0 5rpx;
                                color: var(--common-color);
                            }
                        }
                        .rating{
                            font-size: 26rpx;
                            color: var(--price-color);
                            margin-left: 12rpx;
                            image{
                                width: 26rpx;
                                height: 26rpx;
                            }
                            
                        }
                        
                    }
                }
                .btn{
                    width: 103.1rpx;
                    height: 55.73rpx;
                    line-height: 55.73rpx;
                    border-radius: 26rpx;
                    background: rgba(#C5B3A8,0.1);
                    color: var(--common-color);
                    text-align: center;
                    margin-right: 11rpx;
                }
            }
            .goodslist{
                margin: 23rpx 10rpx 10rpx 10rpx;
                .goods{
                    width: 218rpx;
              
                    background: #FFFFFF;
                    box-shadow: 0rpx 3rpx 47rpx 0rpx rgba(205,210,218,0.34);
                    border-radius: 6rpx;
                    overflow: hidden;
                    .thumb{
                        height: 218.35rpx;
                        width: 218.35rpx;
                        background-color: #ccc;
                        image{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .other{
                        padding: 0 8rpx;
                        .goods_name{
                            margin-top: 12rpx;
                            font-weight: 800;
                            font-size: 20rpx;
                            line-height: 24rpx;
                        }
                        .tagslist{
                            .tag1{
                                display: inline;  
                                margin-right: 5rpx;
                                padding: 0 5rpx;
                                border: 1px solid #ccc;
                                color: var(--str-mid-color);
                                font-size: 20rpx;
                                line-height: 26rpx;
                                border-radius: 5rpx;
                            }
                           
                        }
                        .price_buynum{
                            line-height: 34rpx;
                            .price{
                                font-weight: 500;
                                color: var(--price-color);
                                text{
                                    &:nth-child(1){
                                        font-size: 16.14rpx ;
                                    }
                                    &:nth-child(2){
                                        font-size: 23.73rpx ;
                                    }
                                    &:nth-child(3){
                                        font-size:  16.14rpx ;
                                    }
                                }
                            }
                            .buynum{
                                font-size: 15.89rpx;
                                color: var(--str-mid-color);
                            }
                        }
                    }
                   
                }
            }
        }
    }
</style>